<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		
		<!-- <view style="flex: 1;">
			<text class="uni-title-text">角色名称</text>
		</view> -->
		
		
		<div style="flex: 1;">
		  <!-- <ul>
		    <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
		      {{ item.title }}
		    </li>
		  </ul>
		  <div v-for="(item,index) in dataList" :key="index">
		    <div v-show="item.show">{{ item.content }}</div>
		  </div> -->
		  
		  <!-- <uni-rate></uni-rate> -->
		  
		  <!-- <MenuItem :age="10"></MenuItem> -->
		  <!-- <menuItem :age="123"></menuItem> -->
		  
		  <menu-item :menu-items="treeData"></menu-item>
		  
		  <!-- <ul>
		    <li v-for="node in treeData" :key="node.id">
		      <span @click="toggle(node)">
		        {{ node.name }}
		      </span>
		      <ul v-if="node.children && node.show">
		        <li v-for="childNode in node.children" :key="childNode.id">
		          <span @click="toggle(childNode)">
		            {{ childNode.name }}
		          </span>
		        </li>
		      </ul>
		    </li>
		  </ul> -->
		  
		  <!-- <ul>
		  	<menu-item :menu-items="treeData" @click='toggle(node in treeData)'></menu-item>
		  </ul> -->
		  
		  <!-- <ul style="flex: 1;">
		      <li v-for="(item, index) in treeData" :key="index" :item="item" >
				  <view @click="toggle(index)">{{ item.name }}</view>
				  
				  <li v-show="item.show" v-for="(item, index) in item.children" :key="index" :item="item" >
				  	<view @click="toggle2(index)">{{ item.name }}</view>
					
					
				  </li>
		      </li>
		  </ul> -->
		  
		  <!-- <li v-show="item.children.show" v-for="(item, index) in item.children" :key="index" :item="item" >
		  	<view @click="toggle2(index)">{{ item.name }}</view>
		  </li> -->
		  
		  <!-- <ul style="flex: 1;">
		      <li>
		          <li>
		      		1
		          </li>
				  <li>
					2
				  </li>
		      </li>
			  <li>
			  	2
			  </li>
		  </ul> -->
		</div>
		
		

		<view style="flex: 3; background-color: #eeeeee; height: 100vh;">
			
			<view style="display: flex; flex-direction: row;width: 300px">
				<text class="uni-title-text" style="width: 100px; text-align: right;">角色名称:</text>
				<view @click="onClickA" :style="{border: b + 'px solid '+ c, width: 50 + 'px', height: h + 'px' }" value="" />
			</view>
			
			<view style="display: flex; flex-direction: row; margin-top: 2px;">
				<text class="uni-title-text" style="width: 100px; text-align: right;">创建人:</text>
				<view @click="onClickB" :style="{border: b2 + 'px solid '+ c2, width: 50 + 'px', height: h2 + 'px' }" value="" />
			</view>
			
		</view>

		<view style="flex: 1;">
			<view :style="{display:dis}">
				<view style="display: flex; flex-direction: row;">
					<text class="uni-title-text">角色高度</text>
					<input class="uni-input-default" type="number" @input="onKeyInput" :value="v" />
				</view>
			</view>
			
			<view :style="{display:dis2}">
				<view style="display: flex; flex-direction: row;">
					<text class="uni-title-text">创建人高度</text>
					<input class="uni-input-default" type="number" @input="onKeyInput2" :value="v" />
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import MenuItem from './MenuItem.vue';
	
	export default {
		components: {
		    MenuItem
		},
		data() {
			return {
				title: 'ywy3',
				
				menuItems: [
				  {
					name: 'Item 1',
					path: '/item-1',
					children: [
					  { name: 'Sub Item 1.1', path: '/sub-item-1.1' },
					  { name: 'Sub Item 1.2', path: '/sub-item-1.2' }
					]
				  },
				  {
					name: 'Item 2',
					path: '/item-2',
					children: [
					  { name: 'Sub Item 2.1', path: '/sub-item-2.1' },
					  { name: 'Sub Item 2.2', path: '/sub-item-2.2' }
					]
				  }
				  // ... 更多菜单项
				],
				
				treeData: [
					{
					  name: '角色信息表',
					  show:false,
					  children: [
						{ name: '角色名称', show:false },
						{ name: '创建者', show:false }
					  ]
					},
					{
					  name: '菜单关联表', show:false
					},
					{
					  name: '部门关联表',
					  children: [
						{ name: 'Child 3.1', show:false },
						{ name: 'Child 3.2', show:false }
					  ]
					}
				  ],
				
				h:30,
				h2:30,
				b:1,
				b2:1,
				c:"black",
				c2:"black",
				v:30,
				dis:"none",
				dis2:"none"
			}
		},
		// onLaunch() {
		// 	setTimeout(() => {
		// 		plus.screen.lockOrientation("landscape");
		// 	}, 500);
		// }
		
		onLoad() {
			plus.screen.lockOrientation('landscape');
		},
		methods: {
			toggle(index) {
				alert("2==="+ index);
				
			  index.show = !index.show;
			  
			  // var item = this.treeData[index].children;
			  
			  // // alert("==="+ item[0].show);
			  
			  // for(var i=0; i<item.length; i++){
				 //  item[i].show = !item[i].show;
			  // }
			  // item[0].show = !item[0].show;
			},
			
			// TODO: 这里是需要完成的任务
			toggle2(index) {
				// alert("==="+ index);
			  
			  // var item = this.treeData[index].children;
			  
			  // alert("==="+ item[0].show);
			  
			  
			  // item[0].show = true;
			  // item[1].show = true;
			  
			  // this.treeData[index].show = true;
			  
			  // for(var i=0; i<item.length; i++){
				 //  item[i].show = !item[i].show;
			  // }
			  // item[0].show = !item[0].show;
			},
			
			onClickA: function(event) {
				this.dis = "block";
				this.dis2 = "none";
				
				this.b = 2;
				this.c = "blue";
				
				this.b2 = 1;
				this.c2 = "black";
			},
			
			onClickB: function(event) {
				this.dis2 = "block";
				this.dis = "none";
				
				this.b2 = 2;
				this.c2 = "blue";
				
				this.b = 1;
				this.c = "black";
			},
			
			onKeyInput: function(event) {
				// alert("请输入账号密码"+ JSON.stringify(event) +"==="+ event.detail.value)
				// console.log('点击了success');
				
				this.h = event.detail.value;
			},
			
			onKeyInput2: function(event) {
				// alert("请输入账号密码"+ JSON.stringify(event) +"==="+ event.detail.value)
				// console.log('点击了success');
				
				this.h2 = event.detail.value;
			},
		}
	}
</script>

<style>
	li {
		font-size: 15rpx;
	  /* background: #eee; */
	  padding: 10px;
	  margin-bottom: 10px;
	  cursor: pointer;
	}
	
	li:hover {
	  /* background: #ccc; */
	}
	
	div {
	  padding: 10px;
	}
	
	.uni-title2 {
		flex: 1;
	}
	
	.uni-title3 {
		flex: 2;
	}
	
	.uni-title-text {
		font-size: 15rpx;
		font-weight: bold;
	}

	.uni-input-default {
		border: 1px solid black;
		width: 50px;
		height: 30px;
	}

	.content {
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>